<template>
    <el-container>
        <el-header style="height: 130px">
          <div class="title"><span>行为决策实验平台</span></div>
          <headT></headT>
      </el-header>
        <el-main>
            <timeT></timeT>
            <div class="text">
              <span>
                您选择查看当前
                <span v-if="fundId == 1" class="which">
                  基金Ⅰ
                </span>
                <span v-if="fundId == 2" class="which">
                  基金Ⅱ
                </span>
                <span v-if="fundId == 3" class="which">
                  基金Ⅲ
                </span>
              市场价格走势:
              </span></div>
            <div v-if="fundId == 1" class="carves">
              <tongji></tongji>
            </div>
            <div v-if="fundId == 2" class="carves">
              <tongjitu1></tongjitu1>
            </div>
            <div v-if="fundId == 3" class="carves">
              <tongjitu2></tongjitu2>
            </div>
            <el-button class="return" @click="last">返回</el-button>
        </el-main>
        <footerT></footerT>
    </el-container>
</template>

<script>
import {price} from "@/api/usingTime";
import {listFundsSelective} from "@/api/funds";
import timeT from '@/components/time.vue'
import footerT from '@/components/footer.vue'
import tongji from '@/components/tongjitu.vue'
import headT from '@/components/headT.vue'
import tongjitu1 from "@/components/tongjitu1";
import tongjitu2 from "@/components/tongjitu2";


export default{
  components:{
    timeT,
    footerT,
    tongji,
    headT,
    tongjitu1,
    tongjitu2
  },
  data(){
    return{
      fundId: 0,
      timeEarnings: {
        stage_id: 0,
        round_id: 0,
        user_id: 0,
      }
    }
  },
  mounted() {
    this.fundId = this.$route.query.fId
    console.log(this.fundId)
  },
  methods:{
    //返回
    last(){
      this.timeEarnings.stage_id = this.$cookies.get('stageId') == null ? 1 : parseInt(this.$cookies.get('stageId'))
      this.timeEarnings.round_id = this.$cookies.get('roundId') == null ? 1 : parseInt(this.$cookies.get('roundId'))
      this.timeEarnings.user_id = parseInt( this.$cookies.get('userId') )
      price(this.timeEarnings).then(res => {
        console.log(res)
      })
      this.$router.push('/choice')
    }
  }
}

</script>

<style scoped>

.el-header{
      padding: 0;
  }

  .title{
      height: 100px;
      color: aliceblue;
      text-align: center;
      line-height: 100px;
      font-size: 50px;
      font-weight: 800;
      background-image: linear-gradient(
        DodgerBlue,
        DeepSkyBlue
      );
    }

    .round{
      height: 29px;
      box-sizing: content-box;
      border-bottom: 2px solid #dcdcdc;
      padding-left: 150px;
      line-height: 29px;
      font-size: 10px;
      font-weight: 600;
    }

    .el-main {
      /* background-color: #E9EEF3; */
      background-color: aliceblue;
      color: #333;
      text-align: center;
      height: 560px;
    }

    .text{
        width: 700px;
        height: 40px;
        color: #333;
        font-size: 20px;
        font-weight: 600;
    }

    .which{
      color: #FFC125;
      font-size: 22px;
    }

    .carves{
      width: 800px;
      height: 350px;
      margin: 0 auto;
    }

    button{
        width: 200px;
        height: 40px;
        background-color: #0099FC;
        color: #333;
        font-size: 20px;
        font-weight: 700;
        border: none;
        border-radius: 10px;
        margin-right: 40px;
    }

    .return:hover{
      background-color: LightSkyBlue;
      color: #333;
    }


</style>
